﻿; window.ZbTemplet = window.ZbTemplet || {};
window.ZbTemplet.EditFrame = `
<el-dialog :title="options.title"
           :visible.sync="options.visible"
           :width="options.width||'575px'">
    <el-form :label-width="labelWidth || '80px'" 
             :model="options" 
             :ref="options.formId"
             size="mini">
        <template v-for="(field, index) in options.fields" >
            <el-form-item :label="field.label" 
                          :key="field.name"
                          :prop="'fields.' + index + '.value'" 
                          :rules="field.rules||{required: false}" 
                          v-if="field.type!='hidden' && Array.isArray(field)==false">
                <el-input v-model="field.value" 
                          :placeholder="field.placeholder" 
                          suffix-icon="el-icon" 
                          :disabled="field.disabled"
                          v-if="field.type=='text'"></el-input>
                <el-input v-model="field.value" 
                          type="textarea"
                          autosize
                          :placeholder="field.placeholder" 
                          suffix-icon="el-icon" 
                          :disabled="field.disabled"
                          v-if="field.type=='textarea'"></el-input>
                <el-input-number v-model="field.value" 
                                 :disabled="field.disabled"
                                 controls-position="right" 
                                 :min="1"
                                 v-if="field.type=='number'"></el-input-number>
                <el-select v-model="field.value" 
                           v-if="field.type=='select'" 
                           style="width: 100%;"
                           @change="handleSelect(field)">
                  <el-option :label="option.label" 
                             :value="option.value" 
                             v-for="option in field.options" 
                             :key="option.value"></el-option>
                </el-select>
            </el-form-item>
            <div class="zb-form-line" :inline="true" v-if="Array.isArray(field)==true">
                <template v-for="(item, i) in field" >
                    <el-form-item :label="item.label" 
                                  :key="item.name"
                                  :prop="'fields.' + index + '.' + i + '.value'" 
                                  :rules="item.rules||{required: false}" 
                                  v-if="item.type!='hidden'">
                        <el-input v-model="item.value" 
                                  :placeholder="item.placeholder" 
                                  suffix-icon="el-icon" 
                                  :disabled="item.disabled"
                                  v-if="item.type=='text'"></el-input>
                        <el-input v-model="item.value" 
                                  type="textarea"
                                  autosize
                                  :placeholder="item.placeholder" 
                                  suffix-icon="el-icon" 
                                  :disabled="item.disabled"
                                  v-if="item.type=='textarea'"></el-input>
                        <el-input-number v-model="item.value" 
                                         :disabled="item.disabled"
                                         controls-position="right" 
                                         :min="1"
                                         v-if="item.type=='number'"></el-input-number>
                        <el-select v-model="item.value" 
                                   v-if="item.type=='select'" 
                                   style="width: 100%;"
                                   @change="field.handleChange?field.handleChange():function(){}">
                          <el-option :label="option.label" 
                                     :value="option.value" 
                                     v-for="option in item.options" 
                                     :key="option.value"></el-option>
                        </el-select>
                    </el-form-item>
                </template>
            </div>
        </template>
    </el-form>
    <el-form :label-width="labelWidth || '80px'" 
             :model="options" 
             :ref="options.formId+'_attached'"
             size="mini"
             style="margin-left: 20px;"
             v-if="options.attachedFields && options.attachedFields.length>0">
        <template v-for="(field, index) in options.attachedFields" >
            <el-form-item :label="field.label" 
                          :key="field.name"
                          :prop="'fields.' + index + '.value'" 
                          :rules="field.rules||{required: false}" 
                          v-if="field.type!='hidden' && Array.isArray(field)==false">
                <el-input v-model="field.value" 
                          :placeholder="field.placeholder" 
                          suffix-icon="el-icon" 
                          :disabled="field.disabled"
                          v-if="field.type=='text'"></el-input>
                <el-input v-model="field.value" 
                          type="textarea"
                          autosize
                          :placeholder="field.placeholder" 
                          suffix-icon="el-icon" 
                          :disabled="field.disabled"
                          v-if="field.type=='textarea'"></el-input>
                <el-input-number v-model="field.value" 
                                 :disabled="field.disabled"
                                 controls-position="right" 
                                 :min="1"
                                 v-if="field.type=='number'"></el-input-number>
                <el-select v-model="field.value" 
                           v-if="field.type=='select'" 
                           style="width: 100%;"
                           @change="handleSelect(field)">
                  <el-option :label="option.label" 
                             :value="option.value" 
                             v-for="option in field.options" 
                             :key="option.value"></el-option>
                </el-select>
            </el-form-item>
        </template>
    </el-form>
    <span slot="footer" class="dialog-footer">
        <el-button @click="options.visible = false">取 消</el-button>
        <el-button type="primary" @click="options.op">确 定</el-button>
    </span>
</el-dialog>
`;

if (!Array.prototype.find) {
    Array.prototype.find = function (callback) {
        return callback && (this.filter(callback) || [])[0];
    };
}

Vue.component('zb-edit', {
    template: window.ZbTemplet.EditFrame
    , data() {
        return {
            formInfo: {
                name: ''
            }
        }
    }
    , props: ['options', 'labelWidth']
    , methods: {
        handleSelect: function (field) {
            if (field.handleChange) {
                field.handleChange(field.value);
            }
        }
    }
});